<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>新美星在线报修系统</title>
    <script src="http://wx.newamstar.com:8078/newstar/public/js/jquery.min.js"></script>
    <script src="http://wx.newamstar.com:8078/newstar/public/js/layui.js"></script>
    <link rel="stylesheet" href="http://wx.newamstar.com:8078/newstar/public/css/layui.css">
    <link rel="stylesheet" href="http://wx.newamstar.com:8078/newstar/public/css/layui.mobile.css">
</head>
<body>
<style>
    *{
        padding: 0;
        margin: 0;

    }
    .title p{
        text-align: left;
        /*border: 1px solid black;*/
        text-indent: 0em!important;
    }
</style>
<div style="height: 20px;width: 100%"></div>
<div style="color: red;text-align: left;" class="title">
    <p style="font-weight: bold;font-size: 15px;">报修注意事项：</p>
    <p style="font-weight: bold;font-size: 14px">设施:</p>
    <p style="color: black">(1)报修人在报修详情中,尽量把问题描述清楚</p>
    <p style="margin-bottom: 10px;color: black">(2)非紧急报修行政部收集后统一择时维修</p>
</div>
<form class="layui-form" action="">
    <div class="layui-form-item">
        <label class="layui-form-label">报修人:</label>
        <div class="layui-input-block">
            <input type="text" name="bxr" lay-verify="title" autocomplete="off" placeholder="请输入报修人" class="layui-input bxr">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">报修人工号:</label>
        <div class="layui-input-block">
            <input type="text" name="bxrgh" lay-verify="title" autocomplete="off" placeholder="请输入报修人工号" class="layui-input bxrgh">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">联系方式:</label>
        <div class="layui-input-block">
            <input type="text" name="lxfs" lay-verify="title" autocomplete="off" placeholder="请输入报修人手机号码" class="layui-input lxfs">
        </div>
    </div>
{{--    <div class="layui-form-item">--}}
{{--        <label class="layui-form-label">维修地点:</label>--}}
{{--        <div class="layui-input-block">--}}
{{--            <input type="text" name="fjh" lay-verify="title"  autocomplete="off" placeholder="请输入维修地点" class="layui-input fjh">--}}
{{--        </div>--}}
{{--    </div>--}}
    <div class="layui-form-item">
        <label class="layui-form-label">报修类型:</label>
        <div class="layui-input-block">
            <input type="text" name="bxlx" lay-verify="title" value="厂内报修" readonly autocomplete="off"  class="layui-input bxlx">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">维修详情:</label>
        <div class="layui-input-block">
            <textarea class="layui-input wxxq" name="wxxq" type="text/plain" style="width:99%;height:250px"></textarea>
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">图片上传:</label>
        {{--        <button type="button" class="layui-btn" id="test1">点击选择附件</button>--}}
    </div>
    <div class="layui-form-item">
        <div class="layui-upload-list">
            <img class="layui-upload-img upload demo1 d1" name="pics"  src="" style="width: 100px;height: 100px;">
            <div class="close" style="display: none">X</div>
        </div>
        <div class="layui-upload-list">

            <img class="layui-upload-img upload demo1 d2"  name="pics"  src="" style="width: 100px;height: 100px;">
            <div class="close" style="display: none">X</div>
        </div>
        <div class="layui-upload-list">
            <img class="layui-upload-img upload demo1 d3" name="pics" src="" style="width: 100px;height: 100px;">
            <div class="close" style="display: none">X</div>
        </div>

    </div>

    <div class="layui-form-item" style="margin-top: 50px">
        <label class="layui-form-label">操作:</label>
        <button type="button" class="layui-btn" id="savedata">确认报修</button>
    </div>
</form>

<style>
    *{padding: 0;margin: 0;}
    li{list-style: none}
    p{font-size: 13px;text-indent: 2em;}
    .layui-form-label{width: 50px!important;}
    .layui-input-block{margin-left: 90px!important;}
    .layui-form-item .layui-form-label{overflow: visible!important; }
    .layui-upload-list{float: left;}
    .close{width: 20px;height: 20px;font-size: 30px;}
    .layui-form-label{text-align: left!important;font-weight:bold}
    /*img[src=""],img:not([src]){background-color: white;border: 1px solid }*/
</style>
<script>
    $(function () {
        $("#savedata").on("click",function () {
            let json = getFormJson();
            console.log(json);
            //console.log(json);
            let bxr = $(".bxr").val(),bxrgh = $(".bxrgh").val(),lxfs = $(".lxfs").val(),fjh = $(".fjh").val(),wxxq = $(".wxxq").val();
            if(!bxr){
                layer.msg("报修人不能为空")
                return false;
            }
            if(!bxrgh){
                layer.msg("报修人工号不能为空")
                return false;
            }
            if(!lxfs){
                layer.msg("联系方式不能为空")
                return false;
            }
            // if(!fjh){
            //     layer.msg("维修地点不能为空")
            //     return false;
            // }
            if(!wxxq){
                layer.msg("维修详情不能为空")
                return false;
            }
            $.ajax({
                url:"http://wx.newamstar.com:8078/newstar/public/ssbx_datasave",//提交数据
                type:"post",
                data:getFormJson(),
                success:function (res) {
                    //console.log(res);
                    layer.msg('报修成功', {
                        icon: 1,
                        time: 3000 //2秒关闭（如果不配置，默认是3秒）
                    }, function(){
                        //do something
                    });
                },
                error:function (error) {
                    console.log(error);
                }
            })
        })
    })

    function getFormJson() {
        let o = {};
        let p = {};
        let a = $("form").serializeArray();
        $.each(a, function () {
            if (o[this.name] !== undefined) {
                if (!o[this.name].push) {
                    o[this.name] = [o[this.name]];
                }
                o[this.name].push(this.value || '');
            } else {
                o[this.name] = this.value || '';
            }
        });
        $(".demo1").each(function (i,e) {
            let s = $(this).attr("src");
            if(!!s){
                i+=1;
                p["pic"+i] = s;
            }
        })
        let empty = {}

        let object = $.extend(empty , o, p);
        return empty;
        //return o;
    }

    // $('.close').each(function(){
    //   $(this).siblings("img").attr("src","");
    // })
    $(".close").on("click",function () {
        let _this = $(this);
        layer.confirm('确认移除照片吗？', {
            btn : [ '确定', '取消' ]//按钮
        }, function(index) {
            layer.close(index);
            _this.siblings("img").attr("src",null);
            _this.hide();
        });
        //
    })


    layui.use(['upload', 'element', 'layer'], function(){
        var $ = layui.jquery
            ,upload = layui.upload
            ,element = layui.element
            ,layer = layui.layer;
        //指定允许上传的文件类型
        $('.upload').each(function(){
            let btn = $(this);  //点击按钮对象
            //console.log(btn[0].src);
            //return false;
            let uploadInst = upload.render({
                elem: this,
                multiple:true
                ,url: 'http://wx.newamstar.com:8078/newstar/public/ssbx_upload'//'https://httpbin.org/post' //改成您自己的上传接口
                ,before: function(obj){
                    //this.data={"username":"aaaaaaa","account":"123"}//携带动态参数
                }
                ,done: function(res, index, upload){
                    //如果上传失败
                    let item = this.item;
                    btn.attr("src","http://wx.newamstar.com:8078/newstar/public/"+res.msg);
                    btn.siblings(".close").show();
                }
                //进度条
                ,progress: function(n, elem, e){
                    $(".progress_line").show();
                    element.progress('demo', n + '%'); //可配合 layui 进度条元素使用
                    if(n == 100){
                        $(".progress_line").hide();
                        //layer.msg('上传完毕', {icon: 1});
                        layer.msg('上传完毕', {
                            icon: 1,
                            time: 1 //2秒关闭（如果不配置，默认是3秒）
                        }, function(){
                            //do something
                        });
                    }
                }
            });
        })
    });



</script>
</body>
</html>



